<template>
	<div class="q-pa-md">
		<q-table title="新加坡千汇银行存款" :rows="rows1" :columns="columns1" row-key="name" :pagination="paginationOptions">
			<!-- <template v-slot:top-right>
				<q-btn icon="event" round color="primary">
					<q-popup-proxy @before-show="updateProxy" cover transition-show="scale" transition-hide="scale">
						<q-date v-model="proxyDate">
							<div class="row items-center justify-end q-gutter-sm">
								<q-btn label="Cancel" color="primary" flat v-close-popup />
								<q-btn label="OK" color="primary" flat @click="save" v-close-popup />
							</div>
						</q-date>
					</q-popup-proxy>
				</q-btn>
			</template> -->
			<template v-slot:header="props">
				<q-tr :props="props">
					<q-th v-for="col in props.cols" :key="col.name" :props="props" class="text-black"
						style="font-size: 18px;">
						{{ col.label }}
					</q-th>
				</q-tr>
			</template>
			<template v-slot:body="props">
				<q-tr :props="props">
					<q-td key="bankName" :props="props">
						<q-badge color="accent">
							{{ props.row.bankName }}
						</q-badge>
					</q-td>
					<q-td key="dollar" :props="props">
						<q-badge color="positive">
							{{ props.row.dollar }}
						</q-badge>
						<q-popup-edit v-model="props.row.dollar" title="输入数字" auto-save v-slot="scope"
							@update:model-value="up(props.row)">
							<q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set"
								type="number" />
						</q-popup-edit>
					</q-td>
					<q-td key="rmb" :props="props">
						<q-badge color="red">
							{{ props.row.rmb }}
						</q-badge>
						<q-popup-edit v-model="props.row.rmb" title="输入数字" auto-save v-slot="scope"
							@update:model-value="up(props.row)">
							<q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set"
								type="number" />
						</q-popup-edit>
					</q-td>
				</q-tr>
			</template>
		</q-table>
		<br>
		<q-table title="美国千汇银行存款" :rows="rows2" :columns="columns2" row-key="name" :pagination="paginationOptions">
			<template v-slot:header="props">
				<q-tr :props="props">
					<q-th v-for="col in props.cols" :key="col.name" :props="props" class="text-black"
						style="font-size: 18px;">
						{{ col.label }}
					</q-th>
				</q-tr>
			</template>
			<template v-slot:body="props">
				<q-tr :props="props">
					<q-td key="bankName" :props="props">
						<q-badge color="accent">
							{{ props.row.bankName }}
						</q-badge>
					</q-td>
					<q-td key="dollar" :props="props">
						<q-badge color="positive">
							{{ props.row.dollar }}
						</q-badge>
						<q-popup-edit v-model="props.row.dollar" title="输入数字" auto-save v-slot="scope"
							@update:model-value="up(props.row)">
							<q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set"
								type="number" />
						</q-popup-edit>
					</q-td>
				</q-tr>
			</template>
		</q-table>

	</div>

</template>

<script>

export default {
	data() {
		return {
			paginationOptions: {
				rowsPerPage: 10 // 每页显示的行数
			},
			columns1: [
				{ name: 'bankName', align: 'center', label: '银行', field: 'bankName', sortable: true },
				{ name: 'dollar', align: 'center', label: '美金（万元）', field: 'dollar', sortable: true },
				{ name: 'rmb', align: 'center', label: '人民币（万元）', field: 'rmb', sortable: true },
			],
			columns2: [
				{ name: 'bankName', align: 'center', label: '银行', field: 'bankName', sortable: true },
				{ name: 'dollar', align: 'center', label: '美金（万元）', field: 'dollar', sortable: true },
			],
			rows1: [
			],
			rows2: [
			],
			userInfo: {},
			date: '2025-02-06',
		}
	},
	async created() {
		this.$q.loading.show();
		//this.date = await this.$API.cw.GetyhckRq.get();
		var userInfo = this.$TOOL.data.get("USER_INFO");
		this.userInfo = userInfo;
		//var d = await this.$API.weixin.GetUserById.get(this.userInfo.userId, '108');
		await this.csh(this.date);
		console.log(this.rows1)
		this.$q.loading.hide()
	},
	methods: {
		async up(row) {
			this.$q.loading.show()
			row.userName = this.userInfo.userName;
			var data = { date: this.date, data: row };
			var b = await this.$API.cw.Addyhck.post(data);
			await this.csh(this.date);
			this.$q.loading.hide()
		},
		async upDate(value) {
			this.$q.loading.show()
			await this.csh(value);
			this.date = value;
			this.$q.loading.hide()
		},
		async handleEditClosed({ row, column }) {
			this.$q.loading.show()
			row.userName = this.userInfo.userName;
			var data = { date: this.date, data: row };
			var b = await this.$API.cw.Addyhck.post(data);
			console.log(b);
			await this.csh(this.date);
			this.$q.loading.hide()
			console.log('编辑完成', row, column);
			// 在这里可以处理编辑后的数据，例如更新到后端等操作
		},
		async csh(date) {
			//var rq = await this.$API.cw.GetyhckRq.get();
			var c = await this.$API.cw.Getyhck.get(date, 1);
			this.rows1 = c;
			var d = await this.$API.cw.Getyhck.get(date, 2);
			this.rows2 = d;
		},
		priceFormatter({ cellValue }) {
			return cellValue.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
		}
	}
}
</script>

<style lang="scss">
.q-table {
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;

  /* 表头商务风格 */
  thead th {
    background-color: #2c3e50;
    color: white !important;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #1a2836;
  }

  /* 数据行专业风格 */
  tbody td {
    font-size: 15px;
    color: #606266;
    border-bottom: 1px solid #ebeef5;
    padding: 14px 16px;

    &:hover {
      background-color: #f5f7fa !important;
    }
  }

  /* 斑马纹效果 */
  tr:nth-child(even) {
    background-color: #fafafa;
  }

  /* 金额徽章专业设计 */
  .q-badge {
    border-radius: 4px;
    padding: 6px 14px;
    font-weight: 500;
    letter-spacing: 0.5px;

    &[color="accent"] {
      background: #409eff !important;  // 商务蓝
      color: white !important;
    }
    &[color="positive"] {
      background: #67c23a !important;  // 专业绿
      color: white !important;
    }
    &[color="red"] {
      background: #f56c6c !important;  // 警示红
      color: white !important;
    }
  }

  /* 表格标题专业风格 */
  .q-table__title {
    font-size: 20px !important;
    color: #2c3e50 !important;
    font-weight: 600;
    padding: 18px 24px;
    background-color: #f8f9fa;
    border-bottom: 2px solid #e4e7ed;

    &::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 1.2em;
      background: #409eff;
      margin-right: 12px;
      vertical-align: middle;
    }
  }

  /* 分页器专业样式 */
  .q-table__bottom {
    background: #f8f9fa;
    border-top: 1px solid #e4e7ed;

    .q-btn {
      color: #606266;

      &.active {
        color: #409eff;
        font-weight: 500;
      }
    }
  }
}

/* 表格间距优化 */
.q-pa-md > .q-table + .q-table {
  margin-top: 32px;
}

/* 移动端适配 */
@media (max-width: 600px) {
  .q-table {
    box-shadow: none;
    border: none;

    thead th {
      font-size: 14px;
      padding: 12px;
    }

    tbody td {
      font-size: 13px;
      padding: 10px 12px;
    }

    .q-table__title {
      font-size: 17px !important;
      padding: 14px 16px;
    }
  }
}
</style>
